// component/dateRuler/dateRuler.js
let timer;
const ONE_DAY = 1000 * 60 * 60 * 24;
const minRangeLimit=65;
const maxRangeLimit=120;
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        width: {
            type: Number,
            value: 600
        },
        height: {
            type: Number,
            value: 40,
        },
        totalWidth: {
            type: Number,
            value: 1000
        },
        start: {
            type: String,
            value: (new Date((new Date()).getTime() - 5 * 1000 * 24 * 60 * 60)).toLocaleDateString()
        },
        end: {
            type: String,
            value: (new Date((new Date()).getTime() + 5 * 1000 * 24 * 60 * 60)).toLocaleDateString()
        },
        pointer: {
            type: String,
            value: (new Date()).toLocaleDateString()
        },

        scroll: {
            type: Number,
        },

        disable: {
            type: Boolean,
            value: false
        },
        interval: {
            type: Number,
            value: 10
        },

        hasPointer: {
            type: Boolean,
            value: false,
        },
        pointerX: {
            type: Number,
            value: 0
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        renderList: [],
        rulerList: [],
        maxRulerHeight: 20,
        fontSize: 20,
        rulerPointer: '',
        scrollX: 0,
        pointerX: 0,
        minRangeLimit,
        maxRangeLimit
    },
    lifetimes: {
        attached() {
            // this.reset(true);
            // console.log(this.data.scroll)
            // console.log(this.data.pointerX)
        }
    },
    observers: {
        'start,end,totalWidth,width,interval': function () {
            this.reset();
        },
    },
    /**
     * 组件的方法列表
     */
    methods: {

        reset(isFirst = false) {
            let renderList = [],
                rulerList = [],
                fontSize;
            let scrollX, toChangeScroll = false;
            const startDate = new Date(this.data.start).getTime();
            const endDate = new Date(this.data.end).getTime();
            const pointer = (new Date(this.data.pointer)).toLocaleDateString()
            for (let i = startDate, j = 0; i < endDate; i += ONE_DAY, j++) {
                const date = new Date(i);
                const [year, month, date2, day] = [date.getFullYear(), (date.getMonth() + 1) % 13, date.getDate(), date.getDay()];
                if (this.data.interval < minRangeLimit && day !== 1) continue;
                renderList.push({
                    year,
                    month,
                    date: date2,
                    day,
                    string: date.toLocaleDateString(),
                    left: this.data.interval * j
                })
                if (isFirst && date.toLocaleDateString() === pointer) {
                    scrollX = j;
                    toChangeScroll = true;
                }
            }
            
            if (toChangeScroll) {
                this.setData({
                    pointerX: scrollX * this.data.interval,
                    scrollX: scrollX * this.data.interval - this.data.width / 2,
                })
                // const windowWidth = wx.getSystemInfoSync().windowWidth;
               
            }
            for (let i = 0, j = 0; i <= this.data.totalWidth; i += this.data.interval / 2, j++) {
                if (j % 2 === 0) {
                    if (this.data.interval < minRangeLimit)
                        rulerList.push({
                            left: i,
                            height: this.data.maxRulerHeight / 2
                        })
                    else
                        rulerList.push({
                            left: i,
                            height: this.data.maxRulerHeight
                        })
                } else if (this.data.interval > minRangeLimit) {
                    rulerList.push({
                        left: i,
                        height: this.data.maxRulerHeight / 2
                    })
                }
                // else if (this.data.interval > 100) {
                // rulerList.push({
                //   left: i,
                //   height: this.data.maxRulerHeight / 4
                // })
                // }
            }
            fontSize = this.data.width * this.data.interval * 0.001;
            if (fontSize < 20) fontSize = 20;
            if (fontSize > 30) fontSize = 30;
            this.setData({
                renderList,
                rulerList,
                fontSize
            })
        }
    }
})